﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery使用</title>
    <style type="text/css">
        div {
            width: 60px;
            height: 60px;
            margin: 5px;
            float: left;
        }
    </style>
    <script src="../../../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
        //html 加载完毕
        window.onload = function () {
            //console.log('onload');
            //console.log(document.body)
            var divs = document.getElementsByTagName('div');
            for (var i = 0; i < divs.length; i++) {
                divs[i].index = i;
            }
        };

        //比 window.onload 先执行
        //表示 dom 节点加载完毕
        $(function () {
            //标签选择器
            $('body'); // => document.getElementsByTagName('body')
            //类选择器 
            $('.container');// => document.getElementsByClassName('class')
            //ID 选择器
            //链式操作
            //dom 节点 document.getElementById('id').html
            $('#container').html('<h1>this is a container</h1>').addClass('container').append('<h2>这是链式操作</h2>');// => document.getElementById('id').innerHTML = 

            //多个选择可用逗号分隔    复合选择器
            $('#container, #content');

            //val 用于表单元素   获取表单元素的值
            $('#container').val();

            $('#container').click(function () {

            })

            //jQuery 选择器会返回一个  【 jQuery 】 的数组对象
            //所以在用 jQuery 判断一个元素是否存在，要在选择器后加上下标
            $('#id')[0];
        })

        //$(document).ready(function () {
        //    console.log('ready');
        //})
        

	</script>
</head>
<body>
    <div id="content" class="content"></div>
    <div id="container" class="container"></div>
    <a href="example.html" hreflang="en">Some text</a>

    <a href="example.html" hreflang="en-UK">Some other text</a>

    <a href="example.html" hreflang="eng-lish">will not be outlined</a>
    <input name="man-news" />

    <input name="milkman" />
    <input name="letterman2" />
    <input name="newmilk" />


    <span id="result" f="1">&nbsp;</span>
    <div style="background-color:blue;"></div>
    <div style="background-color:rgb(15,99,30);"></div>

    <div style="background-color:#123456;"></div>
    <div style="background-color:#f11;"></div>
   
</body>
</html>